<template>
  <div id="components-layout-demo-basic">
    <div class="index_info">
      <span class="index_info2">患者信息</span>
      <span class="index_complicate" v-if="siderlist.infoCompletePercentage == 0">暂无患者信息，请及时填写</span>
      <span class="index_complicate" v-else
        ><span>已完成{{ siderlist.infoCompletePercentage }}%</span></span
      >
    </div>

    <a-row type="flex">
      <a-col flex="220px" :style="{ marginBottom: '24px' }" class="basic_left">
        <div style="width: 210px; background-color: #eef0f6; border-radius: 16px">
          <img :src="patientInfo.avatar || src" alt="" />
          <div style="margin: 5px; background-color: #ffffff; border-radius: 8px"></div>
          <a-tag color="#f50" style="position: absolute; left: 114px; top: 108px" v-if="siderlist.groupName">
            {{ siderlist.groupName }}
          </a-tag>
          <div class="" style="padding: 0 3px;">
            <div class="tagHover" @click="showDrawer">
              <a-tag color="red" v-for="item in tags" :key="item">
                {{ item }}
              </a-tag>
              <p style="font-size: 12px;margin-top: 5px;">
                <a-icon type="edit" />
                编辑标签
              </p>
            </div>
            <a-drawer
              title="设置患者标签"
              placement="right"
              :closable="false"
              :visible="visible"
              :width="400"
              :after-visible-change="afterVisibleChange"
              @close="onClose"
            >
              <div class="drawer-tags">
                <div style="margin-bottom: 20px;">
                  <p class="drawer-p"><span class="drawer-span"></span>病理特征</p>
                  <template v-for="tag in tagsAll">
                    <a-checkable-tag
                      :key="tag.id"
                      :checked="selectedTags.indexOf(tag) > -1"
                      @change="checked => handleChange(tag, checked)"
                    >
                      {{ tag.title }}
                    </a-checkable-tag>
                  </template>
                </div>
                <div style="margin-bottom: 20px;">
                  <p class="drawer-p"><span class="drawer-span"></span>并发症与合并症</p>
                  <template v-for="tag in tagsAll2">
                    <a-checkable-tag
                      :key="tag.id"
                      :checked="selectedTags2.indexOf(tag) > -1"
                      @change="checked => handleChange2(tag, checked)"
                    >
                      {{ tag.title }}
                    </a-checkable-tag>
                  </template>
                </div>
                <div style="margin-bottom: 20px;">
                  <p class="drawer-p"><span class="drawer-span"></span>用药</p>
                  <template v-for="tag in tagsAll3">
                    <a-checkable-tag
                      :key="tag.id"
                      :checked="selectedTags3.indexOf(tag) > -1"
                      @change="checked => handleChange3(tag, checked)"
                    >
                      {{ tag.title }}
                    </a-checkable-tag>
                  </template>
                </div>
              </div>
              <div class="drawer-button">
                <a-button type="primary" @click="addTag">确定</a-button>
                <a-button type="default" @click="onClose">取消</a-button>
              </div>
            </a-drawer>
          </div>
          <div
            class=""
            style="
              width: 190px;
              background-color: #ffffff;
              border-radius: 8px;
              margin: 14px 0px 14px 9px;
              position: relative;
              margin-bottom: 14px !important;
              display: flex;
            "
            @click="showDrawerLimit"
          >
            <img
              src="../../assets/shangxiaxian.png"
              style="width: 35px; height: 35px; margin: 15px 2px 15px 4px"
              alt=""
            />
            <a-drawer
              title="设置上下限"
              placement="right"
              :closable="false"
              :visible="visibleLimit"
              :width="500"
              :after-visible-change-limit="afterVisibleChangeLimit"
              @close="onCloseLimit"
            >
              <a-form-model ref="limitForm">
                <a-form-model-item>
                  <span string="label">空腹血糖{{ emptySugar[0] }}～{{ emptySugar[1] }}mmol/L</span>
                  <a-slider range :default-value="[3.9, 6.1]" :max="20" :min="0" :step="0.1" v-model="emptySugar" />
                </a-form-model-item>
                <a-form-model-item>
                  <span string="label"
                    >餐前血糖{{ beforeEatSugar[0] }}～{{ beforeEatSugar[1] }}mmol/L （午餐前、晚餐前）</span
                  >
                  <a-slider range :default-value="[3.9, 6.1]" :max="20" :min="0" :step="0.1" v-model="beforeEatSugar" />
                </a-form-model-item>
                <a-form-model-item>
                  <span string="label"
                    >餐后血糖{{ afterEatSugar[0] }}～{{ afterEatSugar[1] }}mmol/L （早餐后、午餐后、晚餐后）</span
                  >
                  <a-slider range :default-value="[6.7, 11.1]" :max="20" :min="0" :step="0.1" v-model="afterEatSugar" />
                </a-form-model-item>
                <a-form-model-item>
                  <span string="label">睡前血糖{{ beforeSleepSugar[0] }}～{{ beforeSleepSugar[1] }}mmol/L</span>
                  <a-slider
                    range
                    :default-value="[3.9, 6.1]"
                    :max="20"
                    :min="0"
                    :step="0.1"
                    v-model="beforeSleepSugar"
                  />
                </a-form-model-item>
                <a-form-model-item>
                  <span string="label">收缩压{{ hPressure[0] }}～{{ hPressure[1] }}mmHg</span>
                  <a-slider range :default-value="[100, 120]" :max="150" :min="50" :step="1" v-model="hPressure" />
                </a-form-model-item>
                <a-form-model-item>
                  <span string="label">舒张压{{ lPressure[0] }}～{{ lPressure[1] }}mmHg</span>
                  <a-slider range :default-value="[60, 80]" :max="150" :min="50" :step="1" v-model="lPressure" />
                </a-form-model-item>
                <a-form-model-item>
                  <span string="label">BMI{{ bmi[0] }}～{{ bmi[1] }}</span>
                  <a-slider range :default-value="[18.8, 23.9]" :max="40" :min="10" :step="0.1" v-model="bmi" />
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
                  <a-button type="primary" @click="addlimit">
                    确定
                  </a-button>
                  <a-button style="margin-left: 10px;" type="default" @click="onCloseLimit">
                    取消
                  </a-button>
                </a-form-model-item>
              </a-form-model>
            </a-drawer>
            <div v-if="limit" class="limit-text sugarlimit" style="margin-top: 15px;">
              <p class="sider_text">当前上下限</p>
              <p class="sider_text">空腹血糖:{{ limit.emptySugar[0] }}-{{ limit.emptySugar[1] }} mmol/L</p>
              <p class="sider_text ">餐前血糖:{{ limit.beforeEatSugar[0] }}-{{ limit.beforeEatSugar[1] }} mmol/L</p>
              <p class="sider_text ">餐后血糖:{{ limit.afterEatSugar[0] }}-{{ limit.afterEatSugar[1] }} mmol/L</p>
              <p class="sider_text ">睡前血糖:{{ limit.beforeSleepSugar[0] }}-{{ limit.beforeSleepSugar[1] }} mmol/L</p>
              <p class="sider_text ">收缩压:{{ limit.hPressure[0] }}～{{ limit.hPressure[1] }} mmHg</p>
              <p class="sider_text ">舒张压:{{ limit.lPressure[0] }}～{{ limit.lPressure[1] }} mmHg</p>
              <p class="sider_text ">BMI:{{ limit.bmi[0] }}～{{ limit.bmi[1] }}</p>
            </div>
            <div v-else class="limit-text sugarlimit" style="margin-top: 24px;">
              <p class="sider_text_empty">未设置上下限，点此设置</p>
            </div>
          </div>

          <div
            class=""
            style="
				                width: 190px;
				                background-color: #ffffff;
				                border-radius: 8px;
				                margin: 0px 0px 14px 9px;
				                position: relative;
				                margin-bottom: 14px !important;
				                display: flex;
				              "
          >
            <img src="../../assets/plan.png" style="width: 38px; height: 38px; margin: 15px 0 15px 2px" alt="" />
            <div class="sugarlimit" style="margin-top: 15px;" @click="handleSign">
              <template v-if="siderlist.signinStatus == 1">
                <p class="sider_text">已打卡：{{ siderlist.signinDay }}天/&nbsp;{{ siderlist.signinCount }}次</p>
                <p class="sider_text">漏打卡：{{ siderlist.noSigninCount }}次</p>
                <p class="sider_text">今日打卡总分：{{ siderlist.signinScore }}分</p>
              </template>
              <template v-if="siderlist.signinStatus == 0">
                <p class="sider_text" style="margin-top: 12px">打卡计划未生效</p>
              </template>
              <template v-if="siderlist.signinStatus == 2">
                <p class="sider_text" style="margin-top: 12px">打卡计划已结束</p>
              </template>
              <template v-if="siderlist.signinStatus == 3">
                <p class="sider_text" style="margin-top: 12px">打卡计划已暂停</p>
              </template>
              <template v-if="siderlist.signinStatus == 4">
                <p class="sider_text" style="margin-top: 12px;">暂无打卡计划</p>
              </template>
            </div>
          </div>

          <div
            style="
				                width: 190px;
				                background-color: #ffffff;
				                border-radius: 8px;
				                margin: 0px 0px 14px 9px;
				                position: relative;
				                margin-bottom: 14px !important;
				                display: flex;
				              "
          >
            <img src="../../assets/service.png" style="width: 38px; height: 38px; margin: 15px 0 15px 2px" alt="" />
            <div class="service" style="margin-top: 15px;" @click="handleAddService">
              <template v-if="siderlist.serviceStatus == 0">
                <p class="sider_text" style="margin-top: 12px; color: red;">
                  暂无服务，点此添加
                </p>
              </template>
              <template v-if="siderlist.serviceStatus == 1">
                <p class="sider_text consumption1">服务：{{ siderlist.serviceName }}</p>
                <p class="sider_text consumption2">开始日期：{{ siderlist.serviceStartTime }}</p>
                <p class="sider_text consumption2">终止日期：{{ siderlist.serviceEndTime }}</p>
              </template>
              <template v-if="siderlist.serviceStatus == 2">
                <p class="sider_text" style="margin-top: 12px">{{ siderlist.serviceName }}未生效</p>
              </template>
              <template v-if="siderlist.serviceStatus == 3">
                <p class="sider_text" style="margin-top: 12px">{{ siderlist.serviceName }}已结束</p>
              </template>
              <template v-if="siderlist.serviceStatus == 4">
                <p class="sider_text" style="margin-top: 12px">{{ siderlist.serviceName }}已退出</p>
              </template>
              <template v-if="siderlist.serviceStatus == 5">
                <p class="sider_text" style="margin-top: 12px">{{ siderlist.serviceName }}已到期</p>
              </template>
            </div>
          </div>

          <div
            style="
				                width: 190px;
				                background-color: #ffffff;
				               	border-radius: 8px;
				                margin: 0px 0px 24px 9px;
				                position: relative;
				                margin-bottom: 24px !important;
				                display: flex;
				              "
          >
            <img src="../../assets/appointment.png" style="width: 38px; height: 38px; margin: 15px 0 15px 2px" alt="" />
            <div class="service" style="margin-top: 15px;" @click="handleFlup">
              <template v-if="siderlist.flupDate">
                <p class="sider_text">复诊状态：{{ siderlist.flupStatus }}</p>
                <p class="sider_text">
                  {{
                    siderlist.flupStatus == '已复诊' || siderlist.flupStatus == '复诊中' ? '复诊日期' : '预约日期'
                  }}：{{ siderlist.flupDate }}
                </p>
              </template>
              <template v-else>
                <p class="sider_text" style="margin-top: 12px">{{ siderlist.flupStatus }}</p>
              </template>
            </div>
          </div>
          <div style="width: 190px; height: 1px; background-color: rgb(238, 240, 246)"></div>
        </div>
      </a-col>
      <a-col flex="auto" class="basic_right" :style="{ marginBottom: '24px' }">
        <div style="width: 920px;height: 825px; background-color: white; border-radius: 16px;padding: 10px 20px;">
          <a-row>
            <a-col :span="16">
              <div style="background: #fafafa;border-radius: 30px;padding: 0 10px;display: inline-block;">
                <img src="../../assets/shitu.png" style="width: 20px;margin-right: 10px;" />
                <a-radio-group v-model="mode" @change="onChangeTabs">
                  <a-radio-button v-for="item in patientTabs" :value="item.id" :key="item.id"
                    >{{ item.name }}
                  </a-radio-button>
                </a-radio-group>
              </div>
            </a-col>
            <a-col :span="8" :style="{ textAlign: 'right' }">
              <a-date-picker
                v-if="mode == 2"
                :disabled-date="disabledDate"
                v-model="queryDate"
                @change="(date, dateString) => onChange(date, dateString)"
              />
            </a-col>
          </a-row>
          <!--打卡率-->
          <div v-if="mode == 1">
            <div class="periodTabs">
              <a-radio-group v-model="modePeriod" @change="onChangePeriodTabs">
                <a-radio-button v-for="item in periodTabs" :value="item.id" :key="item.id"
                  >{{ item.name }}
                </a-radio-button>
              </a-radio-group>
            </div>
            <a-spin :spinning="tableLoading">
              <template v-if="charts.seriesData.length > 0">
                <line-charts
                  :key="initCharts"
                  ref="myChart"
                  :x-axis-data="charts.axisData"
                  :y-axis-unit="charts.axisUnit"
                  :legend="charts.legend"
                  :series-data="charts.seriesData"
                />
              </template>
              <a-empty v-else :image-style="{ height: '400px' }" style="margin-top: 70px">
                <img slot="image" src="~@/assets/report-empty.png" />
              </a-empty>
            </a-spin>
          </div>
          <!--今日打卡-->
          <div v-if="mode == 2" class="checkInToday">
            <a-spin v-if="signinRecords" :spinning="tableLoading">
              <a-row :gutter="24">
                <a-col v-for="item in sugarCheck" :span="3" :key="item.name">
                  <p class="checkInColTitle">{{ item.name }}</p>
                  <p style="display: inline-block;height: 64px;line-height: 64px;">
                    <template v-if="!item.normal">
                      <span :style="{ color: item.value == '漏打' ? 'red' : '#000' }">{{ item.value }}</span>
                    </template>
                    <template v-else>
                      <span>{{ item.value }}</span>
                      <img class="icon" v-if="item.status == 1" src="../../assets/shenggao.png" />
                      <img class="icon" v-if="item.status == 3" src="../../assets/jiangdi.png" />
                    </template>

                    <!-- <span v-if="item.value">{{ item.value }}</span>
                    <span v-if="!item.value" style="color: red;">漏打</span>
                    <img class="icon" v-if="item.status == 1" src="../../assets/shenggao.png" />
                    <img class="icon" v-if="item.status == 2" src="../../assets/jiangdi.png" /> -->
                  </p>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col v-for="item in FSMCheck" :span="3" :key="item.name">
                  <p class="checkInColTitle">{{ item.name }}</p>
                  <p style="display: inline-block;height: 64px;line-height: 64px;">
                    <template v-if="!item.normal">
                      <span :style="{ color: item.value == '漏打' ? 'red' : '#000' }">{{ item.value }}</span>
                    </template>
                    <template v-else>
                      <span v-if="!item.is_pic">{{ item.value }}</span>
                      <img
                        v-else
                        :src="item.value[0]"
                        @click="handlePreview(item.value)"
                        style="width: 64px;height: 64px;object-fit: contain;"
                      />
                    </template>

                    <!-- <img v-if="item.value" :src="item.value[0]" @click="handlePreview(item.value)"
                      style="width: 64px;height: 64px;object-fit: contain;" />
                    <span v-if="!item.value" style="color: red;">漏打</span> -->
                  </p>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col v-for="item in Check1" :span="3" :key="item.name">
                  <p class="checkInColTitle">{{ item.name }}</p>
                  <p style="display: inline-block;height: 64px;line-height: 64px;">
                    <template v-if="!item.normal">
                      <span :style="{ color: item.value == '漏打' ? 'red' : '#000' }">{{ item.value }}</span>
                    </template>
                    <template v-else>
                      <template v-if="!item.is_pic">
                        <span>{{ item.value }}</span>
                        <img class="icon" v-if="item.status == 1" src="../../assets/shenggao.png" />
                        <img class="icon" v-if="item.status == 3" src="../../assets/jiangdi.png" />
                      </template>
                      <img
                        v-else
                        :src="item.value[0]"
                        @click="handlePreview(item.value)"
                        style="width: 64px;height: 64px;object-fit: contain;"
                      />
                    </template>

                    <!-- <span v-if="item.value">{{ item.value }}</span>
                    <span v-if="!item.value" style="color: red;">漏打</span>
                    <img class="icon" v-if="item.status == 1" src="../../assets/shenggao.png" />
                    <img class="icon" v-if="item.status == 2" src="../../assets/jiangdi.png" /> -->
                  </p>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col v-for="item in Check2" :span="3" :key="item.name">
                  <p class="checkInColTitle">{{ item.name }}</p>
                  <p style="display: inline-block;height: 64px;line-height: 64px;">
                    <template v-if="!item.normal">
                      <span :style="{ color: item.value == '漏打' ? 'red' : '#000' }">{{ item.value }}</span>
                    </template>
                    <template v-else>
                      <span>{{ item.value }}</span>
                      <img class="icon" v-if="item.status == 1" src="../../assets/shenggao.png" />
                      <img class="icon" v-if="item.status == 3" src="../../assets/jiangdi.png" />
                    </template>

                    <!-- <span v-if="item.value">{{ item.value }}</span>
                    <span v-if="!item.value" style="color: red;">漏打</span>
                    <img class="icon" v-if="item.status == 1" src="../../assets/shenggao.png" />
                    <img class="icon" v-if="item.status == 2" src="../../assets/jiangdi.png" /> -->
                  </p>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col v-for="item in Check3" :span="3" :key="item.name">
                  <p class="checkInColTitle">{{ item.name }}</p>
                  <p style="display: inline-block;height: 64px;line-height: 64px;">
                    <template v-if="!item.normal">
                      <span :style="{ color: item.value == '漏打' ? 'red' : '#000' }">{{ item.value }}</span>
                    </template>
                    <template v-else>
                      <template v-if="!item.is_pic">
                        <span>{{ item.value }}</span>
                        <img class="icon" v-if="item.status == 1" src="../../assets/shenggao.png" />
                        <img class="icon" v-if="item.status == 3" src="../../assets/jiangdi.png" />
                      </template>
                      <img
                        v-else
                        :src="item.value[0]"
                        @click="handlePreview(item.value)"
                        style="width: 64px;height: 64px;object-fit: contain;"
                      />
                    </template>
                  </p>
                </a-col>
              </a-row>
            </a-spin>
            <a-empty v-else :image-style="{ height: '400px' }" style="margin-top:80px">
              <img slot="image" src="~@/assets/report-empty.png" />
              <span slot="description">暂无打卡计划</span>
            </a-empty>
          </div>
          <!--控制目标-->
          <div v-if="mode == 3" class="" style="margin-top:20px;">
            <a-spin :spinning="tableLoading">
              <a-table
                v-if="patientTargetcolumns"
                :pagination="false"
                :bordered="true"
                :columns="patientTargetcolumns"
                :data-source="patientTarget"
                :scroll="{ x: 200, y: 550 }"
              >
                <!-- <div slot="emptyText">
                  <span>暂无控制目标，</span><span style="color: red" @click="handleEdit">点此设置</span>
                </div> -->
              </a-table>
              <a-empty v-else :image-style="{ height: '400px' }" style="margin-top:80px">
                <img slot="image" src="~@/assets/report-empty.png" />
                <span slot="description"
                  ><span>暂无控制目标，</span
                  ><span class="service" style="color: red" @click="handleEdit">点此设置</span></span
                >
              </a-empty>
            </a-spin>
            <!--<p slot="status" slot-scope="status" >
					      <p v-html="status"></p>
					    </p>-->
          </div>

          <a-modal :visible="previewVisible" :footer="null" :closable="false" @cancel="handleCancel">
            <a-carousel arrows>
              <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                <a-icon type="left-circle" />
              </div>
              <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right-circle" />
              </div>
              <img v-for="item in preview" :src="item" :key="item.name" @mousewheel="imgwheel" />
            </a-carousel>
          </a-modal>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import LineCharts from '@/views/patient/components/LineChart'
import { getUrlKey } from '@/utils/util'
import moment from 'moment'
import { Empty } from 'ant-design-vue'

const sugarCheck = [
  {
    name: '空腹血糖',
    value: '',
    key: 'k1',
    status: 0 //0正常 1偏高 2偏低
  },
  {
    name: '早餐后血糖',
    value: '',
    key: 'k2',
    status: 0 //0正常 1偏高 2偏低
  },
  {
    name: '午餐前血糖',
    value: '',
    key: 'k3',
    status: 0 //0正常 1偏高 2偏低
  },
  {
    name: '午餐后血糖',
    value: '',
    key: 'k4',
    status: 0 //0正常 1偏高 2偏低
  },
  {
    name: '晚餐前血糖',
    value: '',
    key: 'k5',
    status: 0 //0正常 1偏高 2偏低
  },
  {
    name: '晚餐后血糖',
    value: '',
    key: 'k6',
    status: 0 //0正常 1偏高 2偏低
  },
  {
    name: '凌晨血糖',
    value: '',
    key: 'k7',
    status: 0 //0正常 1偏高 2偏低
  },
  {
    name: '睡前血糖',
    value: '',
    key: 'k8',
    status: 0 //0正常 1偏高 2偏低
  }
]
const FSMCheck = [
  {
    name: '早餐',
    key: 'k9',
    value: ''
  },
  {
    name: '午餐',
    key: 'k10',
    value: ''
  },
  {
    name: '晚餐',
    key: 'k11',
    value: ''
  },
  {
    name: '运动',
    key: 'k12',
    value: ''
  },
  {
    name: '用药(早)',
    key: 'k13',
    value: ''
  },
  {
    name: '用药(午)',
    key: 'k14',
    value: ''
  },
  {
    name: '用药(晚)',
    key: 'k15',
    value: ''
  },
  {
    name: '用药(睡前)',
    key: 'k16',
    value: ''
  }
]
const Check1 = [
  {
    name: '胰岛素(早)',
    key: 'k17',
    value: '',
    pic: true
  },
  {
    name: '胰岛素(午)',
    key: 'k18',
    value: '',
    pic: true
  },
  {
    name: '胰岛素(晚)',
    key: 'k19',
    value: '',
    pic: true
  },
  {
    name: '胰岛素(睡前)',
    key: 'k20',
    value: '',
    pic: true
  },
  {
    name: '睡眠',
    key: 'k21',
    value: ''
  },
  {
    name: '体重',
    value: '',
    key: 'k22',
    status: 0
  },
  {
    name: '腰围',
    key: 'k24',
    value: ''
  },
  {
    name: '尿酮',
    key: 'k23',
    value: '',
    pic: true
  }
]
const Check2 = [
  {
    name: '晨起收缩压',
    value: '',
    key: 'k25',
    status: 0
  },
  {
    name: '晨起舒张压',
    value: '',
    key: 'k26',
    status: 0
  },
  {
    name: '晨起心率',
    value: '',
    key: 'k27',
    status: 0
  },
  {
    name: '睡前收缩压',
    value: '',
    key: 'k28',
    status: 0
  },
  {
    name: '睡前舒张压',
    value: '',
    key: 'k29',
    status: 0
  },
  {
    name: '睡前心率',
    value: '',
    key: 'k30',
    status: 0
  }
]
const Check3 = [
  {
    name: '早营养素',
    value: '',
    key: 'k31',
    status: 0,
    pic: true
  },
  {
    name: '中营养素',
    value: '',
    key: 'k32',
    status: 0,
    pic: true
  },
  {
    name: '晚营养素',
    value: '',
    key: 'k33',
    status: 0,
    pic: true
  },
  {
    name: '睡前营养素',
    value: '',
    key: 'k34',
    status: 0,
    pic: true
  }
]
const data = []
export default {
  name: 'indexV2',
  components: {
    LineCharts
  },
  data() {
    return {
      list: [],
      siderlist: {},
      previewVisible: false,
      tableLoading: false,
      data,
      simpleImage: '~@/assets/report-empty.png',
      date1: '预约日期',
      linetime: [],
      linedata: [],
      queryDate: null,
      charts: {
        axisData: [],
        axisUnit: '%',
        legend: ['打卡率', '达标率']
      },
      tags: [],
      tagsAll: [],
      tagsAll2: [],
      tagsAll3: [],
      selectedTags: [],
      selectedTags2: [],
      selectedTags3: [],
      visible: false,
      visibleLimit: false,
      cache: [],
      limit: {
        emptySugar: [],
        beforeEatSugar: [],
        afterEatSugar: [],
        beforeSleepSugar: [],
        hPressure: [],
        lPressure: [],
        bmi: []
      },
      emptySugar: [3.9, 6.1],
      beforeEatSugar: [3.9, 6.1],
      afterEatSugar: [6.7, 11.1],
      beforeSleepSugar: [3.9, 6.1],
      hPressure: [100, 120],
      lPressure: [60, 80],
      bmi: [18.8, 23.9],
      patientTabs: [
        {
          id: 1,
          name: '打卡率'
        },
        {
          id: 2,
          name: '今日打卡'
        },
        {
          id: 3,
          name: '控制目标'
        }
      ],
      mode: 2,
      visitFields: ['打卡率(%)', '达标率(%)'],
      checkInData: [],
      periodTabs: [
        {
          id: 1,
          name: '最近两周'
        },
        {
          id: 2,
          name: '最近一个月'
        },
        {
          id: 3,
          name: '最近三个月'
        }
      ],
      modePeriod: 1,
      zoomVal: 1,
      preview: [],
      initCharts: 'init',
      patientInfo: {},
      signinRecords: null,
      sugarCheck,
      FSMCheck,
      Check1,
      Check2,
      Check3,
      patientTargetcolumns: [],
      patientTarget: [],
      src: 'https://images-gz.oss-cn-guangzhou.aliyuncs.com/upload/head_1641873225158.png',
      url: {
        getBasicInfo: '100/12/1001202',
        getSiderInfo: '108/01/1080105',
        getTargetList: '107/02/1070205',
        getTagList: 'tag/categoryList',
        bindTag: 'tag/bindPatient',
        bindUpLow: '101/01/1010106', //血糖上下限
        getLine: '108/01/1080106'
      }
    }
  },
  computed: {
    today() {
      const date = new Date()
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      m = m < 10 ? '0' + m : m
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    }
  },
  created() {
    // this.addColumns()
    this.queryDate = this.today
    this.getPatientInfo()
    this.getTagList()
    this.getSiderInfo()
    this.getLine(1)
  },
  methods: {
    getPatientInfo() {
      postAction('/100/12/1001202', { patientId: getUrlKey(PAGE_MENU_TYPE.PatientId) }).then(res => {
        if (res.success) {
          this.patientInfo = res.result[0]
        }
      })
    },
    handleString(str) {
      return parseInt(str.split('%')[0])
    },
    handleEdit() {
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: '/service/target',
        query
      })
    },
    imgwheel() {
      let e = e || window.event
      const body = document.querySelector('.ant-modal-body')
      this.zoomVal += e.wheelDelta / 1200
      if (this.zoomVal >= 0.2) {
        body.style.transform = `scale(${this.zoomVal})`
        // this.wheel = `transform:scale(${this.zoomVal});`
      } else {
        this.zoomVal = 0.2
        body.style.transform = `scale(${this.zoomVal})`
        // this.wheel = `transform:scale(${this.zoomVal});`
        return false
      }
    },
    //添加标签弹窗
    afterVisibleChange(val) {
      console.log('visible', val)
    },
    disabledDate(current) {
      return current > moment().endOf('day')
    },
    onChange(date, dateString) {
      this.queryDate = dateString
      dateString && this.getLine(1)
    },
    showDrawer() {
      this.visible = true
      //			this.selectedTags = this.tags
    },
    onClose() {
      this.visible = false
    },
    handleChange(tag, checked) {
      const { selectedTags } = this
      const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags?.filter(t => t !== tag)
      console.log('You are interested in: ', nextSelectedTags)
      this.selectedTags = nextSelectedTags
    },
    handleChange2(tag, checked) {
      const { selectedTags2 } = this
      const nextSelectedTags = checked ? [...selectedTags2, tag] : selectedTags2?.filter(t => t !== tag)
      console.log('You are interested in: ', nextSelectedTags)
      this.selectedTags2 = nextSelectedTags
    },
    handleChange3(tag, checked) {
      const { selectedTags3 } = this
      const nextSelectedTags = checked ? [...selectedTags3, tag] : selectedTags3?.filter(t => t !== tag)
      console.log('You are interested in: ', nextSelectedTags)
      this.selectedTags3 = nextSelectedTags
    },
    addTag() {
      //			this.tags = this.selectedTags
      let tags = []
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      tags = this.selectedTags.concat(this.selectedTags2, this.selectedTags3)
      const tagIds = tags.map(v => {
        return v.id
      })
      console.log(tagIds)
      const params = {
        patientId,
        tagIds
      }
      postAction(this.url.bindTag, params).then(res => {
        if (res.success) {
          this.getSiderInfo()
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
        this.visible = false
      })
      this.visible = false
    },
    activedTags(list) {
      if (list) {
        this.selectedTags = [...this.tagsAll?.filter(v => list.includes(v.title))]
        this.selectedTags2 = [...this.tagsAll2?.filter(v => list.includes(v.title))]
        this.selectedTags3 = [...this.tagsAll3?.filter(v => list.includes(v.title))]
      }
    },
    //上下限设置弹窗
    afterVisibleChangeLimit(val) {
      console.log('visibleLimit', val)
    },
    showDrawerLimit() {
      this.visibleLimit = true
      this.limit && (this.emptySugar = this.limit.emptySugar)
      this.limit && (this.beforeEatSugar = this.limit.beforeEatSugar)
      this.limit && (this.afterEatSugar = this.limit.afterEatSugar)
      this.limit && (this.beforeSleepSugar = this.limit && this.limit.beforeSleepSugar)
      this.limit && (this.hPressure = this.limit.hPressure)
      this.limit && (this.lPressure = this.limit.lPressure)
      this.limit && (this.bmi = this.limit.bmi)
      console.log(this.emptySugar)
    },
    onCloseLimit() {
      this.visibleLimit = false
      // this.limit = this.cache
    },
    addlimit() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      const params = {
        lowerValueLimosis: this.emptySugar[0],
        upperValueLimosis: this.emptySugar[1],
        lowerValueBeforeMeal: this.beforeEatSugar[0],
        upperValueBeforeMeal: this.beforeEatSugar[1],
        lowerValueAfterMeal: this.afterEatSugar[0],
        upperValueAfterMeal: this.afterEatSugar[1],
        lowerValueBeforeSleep: this.beforeSleepSugar[0],
        upperValueBeforeSleep: this.beforeSleepSugar[1],
        lowerValueHighPressure: this.hPressure[0],
        upperValueHighPressure: this.hPressure[1],
        lowerValueLowPressure: this.lPressure[0],
        upperValueLowPressure: this.lPressure[1],
        lowerValueBmi: this.bmi[0],
        upperValueBmi: this.bmi[1],
        patientId
      }
      postAction(this.url.bindUpLow, params).then(res => {
        if (res.success) {
          this.getSiderInfo()
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
        this.visibleLimit = false
      })
    },
    handleAddService() {
      if (this.siderlist.serviceStatus == 3) return
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: '/service/record-list',
        query
      })
    },
    handleFlup() {
      if (
        this.siderlist.flupStatus == '已预约' ||
        this.siderlist.flupStatus == '待复诊' ||
        this.siderlist.flupStatus == '未复诊' ||
        this.siderlist.flupStatus == '暂无预约记录'
      )
        return
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: '/visit_flup/visit',
        query
      })
    },
    handleSign() {
      if (this.siderlist.signinStatus == 1) {
        const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
        let query = {}
        query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
        query[PAGE_MENU_TYPE.PatientId] = patientId
        this.$router.push({
          path: '/blood_profile/punch',
          query
        })
      }
    },
    onChangeTabs(e) {
      this.mode = e.target.value
      console.log('mode', this.mode)
    },
    onChangePeriodTabs(e) {
      this.modePeriod = e.target.value
      this.getLine(this.modePeriod)
      console.log('modePeriod', this.modePeriod)
    },
    //表格加载列
    addColumns() {
      for (var i = 1; i <= 10; i++) {
        this.patientTargetcolumns.push({
          title: '第' + i + '周',
          align: 'center',
          dataIndex: 'week' + i,
          width: 100,
          scopedSlots: { customRender: 'status' },
          customRender: (text, row, index) => {
            let element = ''
            if (text.indexOf('/') > 0) {
              let text1 = text.substring(0, text.indexOf('/'))
              let text2 = text.substring(text.indexOf('/') + 1)
              if (Number(text1) > Number(text2)) {
                element = (
                  <span>
                    {text}
                    <img src="../up.png" />
                  </span>
                )
              } else {
                element = <span>{text}</span>
              }
            } else {
              element = <span>{text}</span>
            }
            const obj = {
              children: element,
              atttrs: {}
            }
            return obj
          }
        })
      }
    },
    handlePreview(file) {
      console.log(file)
      this.preview = file
      this.previewVisible = true
    },
    handleCancel() {
      this.previewVisible = false
    },
    getTagList() {
      getAction(this.url.getTagList, { pid: 17 }).then(res => {
        if (res.success) {
          res.result.forEach(v => {
            if (v.title == '病理特征') {
              this.tagsAll = v.children
            } else if (v.title == '用药情况' || v.title == '用药') {
              this.tagsAll3 = v.children
            } else if (v.title == '并发症与合并症') {
              this.tagsAll2 = v.children
            }
          })
        }
      })
    },
    getSiderInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId
      }
      getAction(this.url.getSiderInfo, params).then(res => {
        if (res.success) {
          this.siderlist = res.result
          this.tags = res.result.tags
          this.activedTags(this.tags)
          const info = res.result.uplowInfo
          if (info) {
            this.limit = {
              emptySugar: [info.lowerValueLimosis, info.upperValueLimosis], //空腹血糖
              beforeEatSugar: [info.lowerValueBeforeMeal, info.upperValueBeforeMeal], //餐前血糖
              afterEatSugar: [info.lowerValueAfterMeal, info.upperValueAfterMeal], //餐后血糖
              beforeSleepSugar: [info.lowerValueBeforeSleep, info.upperValueBeforeSleep], //睡前血糖
              hPressure: [info.lowerValueHighPressure, info.upperValueHighPressure], //收缩压
              lPressure: [info.lowerValueLowPressure, info.upperValueLowPressure], //舒张压
              bmi: [info.lowerValueBmi, info.upperValueBmi] //bmi
            }
          } else {
            this.limit = info
          }
          // this.cache = limit
          this.linedata = res.result.sugarValues
          this.linetime = res.result.sugarTimes
          if (res.result.flupStatusNum == 0) {
            this.date1 = '预约日期'
          }
          if (res.result.flupStatusNum == 1 || res.result.flupStatusNum == 3 || res.result.flupStatusNum == 5) {
            this.date1 = '预约日期'
          }
          if (res.result.flupStatusNum == 2 || res.result.flupStatusNum == 4) {
            this.date1 = '复诊日期'
          }
          // console.log(this.linedata)
          // this.drawLine()
        }
      })
    },
    getLine(type) {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      this.tableLoading = true
      this.charts.axisData = []
      this.charts.seriesData = []
      postAction(this.url.getLine, { patientId, type, queryDate: this.queryDate })
        .then(res => {
          if (res.success) {
            const line = res.result.signinRateLine
            if (line) {
              let tempPunchRate = line.punchRate.map((item, index) => {
                return this.handleString(item).toString()
              })

              let tempComplianceRate = line.complianceRate.map((item, index) => {
                return this.handleString(item).toString()
              })

              this.charts.axisData = line.rate
              this.charts.seriesData = [tempPunchRate, tempComplianceRate]
            } else {
              this.checkInData = line
            }
            // 达标率
            this.patientTargetcolumns = res.result.controlTargetTable
              ? res.result.controlTargetTable.header.map(v => {
                  return {
                    title: v.tableName,
                    dataIndex: v.dataIndex,
                    width: v.key == 'k0' ? 180 : 100,
                    align: 'center',
                    customRender: (text, row, index) => {
                      let element = []
                      if (text) {
                        if (row[`${v.key}State`] == 1) {
                          element = (
                            <div style="position: relative;">
                              <span>{text}</span>
                              <span style="position: absolute;right: 12px;color: red;">↑</span>
                            </div>
                          )
                        } else {
                          element.push(text)
                        }
                      } else {
                        element.push('/')
                      }
                      const obj = {
                        children: element, // 这是渲染列的值，支持渲染html
                        attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
                      }
                      return obj
                    }
                  }
                })
              : null
            if (res.result.controlTargetTable) {
              if (res.result.controlTargetTable.content && res.result.controlTargetTable.content.length > 0) {
                let array = []
                res.result?.controlTargetTable?.content
                  ?.filter(item => {
                    return this.filterEmptyTargetValue(item, 0, '0/0') && this.filterEmptyTargetValue(item, '/', '/')
                  })
                  .forEach(item => {
                    array.push(item)
                  })
                this.patientTarget = array
              }
            } else {
              this.patientTarget = []
            }
            // this.patientTarget = res.result.controlTargetTable ? res.result.controlTargetTable.content : []

            // 控制目标
            const signinRecords = res.result.signinRecords
            this.signinRecords = signinRecords
            // signinRecords && (this.signinRecords = signinRecords)
            if (signinRecords) {
              this.sugarCheck.forEach(v => {
                if (signinRecords[`${v.key}PlanState`] != 1 && signinRecords[`${v.key}PlanState`] != undefined) {
                  console.log(signinRecords[`${v.key}PlanState`])
                  v.value = this.planStateToText(signinRecords[`${v.key}PlanState`])
                  console.log('v.value', v.value)
                  v.status = 0
                  this.$set(v, 'normal', false)
                } else {
                  v.value = signinRecords ? signinRecords[v.key] : ''
                  v.status = signinRecords ? signinRecords[`${v.key}State`] : 0
                  this.$set(v, 'normal', true)
                }
              })

              this.FSMCheck.forEach(v => {
                if (signinRecords[`${v.key}PlanState`] != 1 && signinRecords[`${v.key}PlanState`] != undefined) {
                  v.value = this.planStateToText(signinRecords[`${v.key}PlanState`])
                  v.status = 0
                  this.$set(v, 'normal', false)
                } else {
                  if (signinRecords[`${v.key}Describe`] != null && signinRecords[`${v.key}Describe`] != '') {
                    if (v.key == 'k13' || v.key == 'k14' || v.key == 'k15' || v.key == 'k16') {
                      v.value =
                        signinRecords[`${v.key}Describe`] == 1
                          ? '遵嘱用药'
                          : signinRecords[`${v.key}Describe`] == 2
                          ? '漏用药'
                          : '自停药'
                      this.$set(v, 'is_pic', false)
                    } else {
                      v.value = signinRecords[`${v.key}Describe`]
                      this.$set(v, 'is_pic', false)
                    }
                  } else {
                    v.value = signinRecords ? (signinRecords[v.key] ? signinRecords[v.key].split(',') : '') : ''
                    this.$set(v, 'is_pic', true)
                  }
                  v.status = signinRecords ? signinRecords[`${v.key}State`] : 0
                  this.$set(v, 'normal', true)
                }
              })

              this.Check1.forEach(v => {
                if (signinRecords[`${v.key}PlanState`] != 1 && signinRecords[`${v.key}PlanState`] != undefined) {
                  v.value = this.planStateToText(signinRecords[`${v.key}PlanState`])
                  v.status = 0
                  this.$set(v, 'normal', false)
                } else {
                  if (v.pic) {
                    if (signinRecords[`${v.key}Describe`] != null && signinRecords[`${v.key}Describe`] != '') {
                      if (v.key == 'k17' || v.key == 'k18' || v.key == 'k19' || v.key == 'k20') {
                        v.value =
                          signinRecords[`${v.key}Describe`] == 1
                            ? '遵嘱注射'
                            : signinRecords[`${v.key}Describe`] == 2
                            ? '漏注射'
                            : '自停打'
                        this.$set(v, 'is_pic', false)
                      } else {
                        v.value = signinRecords[`${v.key}Describe`]
                        this.$set(v, 'is_pic', false)
                      }
                    } else {
                      v.value = signinRecords ? (signinRecords[v.key] ? signinRecords[v.key].split(',') : '') : ''
                      console.log(v.key, '图片', v.value)
                      this.$set(v, 'is_pic', true)
                    }
                  } else {
                    v.value = signinRecords ? signinRecords[v.key] : ''
                    this.$set(v, 'is_pic', false)
                  }
                  v.status = signinRecords ? signinRecords[`${v.key}State`] : 0
                  this.$set(v, 'normal', true)
                }
              })
              this.Check2.forEach(v => {
                if (signinRecords[`${v.key}PlanState`] != 1 && signinRecords[`${v.key}PlanState`] != undefined) {
                  v.value = this.planStateToText(signinRecords[`${v.key}PlanState`])
                  v.status = 0
                  this.$set(v, 'normal', false)
                } else {
                  v.value = signinRecords ? signinRecords[v.key] : ''
                  v.status = signinRecords ? signinRecords[`${v.key}State`] : 0
                  this.$set(v, 'normal', true)
                }
              })
              this.Check3.forEach(v => {
                if (signinRecords[`${v.key}PlanState`] != 1 && signinRecords[`${v.key}PlanState`] != undefined) {
                  v.value = this.planStateToText(signinRecords[`${v.key}PlanState`])
                  v.status = 0
                  this.$set(v, 'normal', false)
                } else {
                  if (v.pic) {
                    if (signinRecords[`${v.key}Describe`] != null && signinRecords[`${v.key}Describe`] != '') {
                      v.value = signinRecords[`${v.key}Describe`]
                      this.$set(v, 'is_pic', false)
                    } else {
                      v.value = signinRecords ? (signinRecords[v.key] ? signinRecords[v.key].split(',') : '') : ''
                      this.$set(v, 'is_pic', true)
                    }
                  } else {
                    v.value = signinRecords ? signinRecords[v.key] : ''
                    this.$set(v, 'is_pic', false)
                  }
                  v.status = signinRecords ? signinRecords[`${v.key}State`] : 0
                  this.$set(v, 'normal', true)
                }
              })
            }
          }
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    planStateToText(state) {
      console.log('state', state)
      let text = ''
      switch (state) {
        case 2:
          text = '漏打'
          break
        case 3:
          text = '待打卡'
          break
        case 4:
          text = '-'
          break
      }
      return text
    },
    drawLine() {
      console.log(this.linedata)
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      var option = {
        grid: {
          width: '80%', // 宽度
          height: '55%' // 高度
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: this.linetime,

          boundaryGap: false,

          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: false,

          // splitNumber: 3,
          axisLine: { show: false },
          axisTick: {
            show: false
          }
        },
        // visualMap: {
        //   show: false,
        //   dimension: 0,
        //   pieces: [
        //     {
        //       gt: 0,
        //       lte: 4.4,
        //       color: 'green',
        //     },
        //     {
        //       gt: 4.4,
        //       lte: 7.8,
        //       color: 'red',
        //     },
        //     {
        //       gt: 7.8,
        //       color: 'pink',
        //     },
        //   ],
        // },

        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 0,
              lte: 4.4,
              color: '#E88327'
            },
            {
              gt: 4.4,
              lte: 7.8,
              color: '#00D570'
            },
            {
              gt: 7.8,
              color: '#FB0B0A'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },

        series: [
          {
            name: '血糖曲线',

            outOfRange: {
              color: '#999'
            },
            markArea: {
              silent: true
            },

            markLine: {
              silent: false, //鼠标悬停事件
              lineStyle: {
                color: '#f06980'
              },
              label: {
                textStyle: {
                  color: '#4d4d4d'
                }
              }
            },
            data: this.linedata,
            type: 'line', // 设置图表类型为 折线图
            smooth: true,
            connectNulls: true
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },

    /**
     * 过滤空值
     * @param item
     * @param filterValue
     */
    filterEmptyTargetValue(item, filterValue1, filterValue2) {
      if (item.k1 != filterValue1) {
        return true
      }
      for (let i = 2; i <= 6; i++) {
        if (item['k' + i] != filterValue2) {
          return true
        }
      }
      return false
    }
  },

  activated() {}
  //	mounted() {
  //   this.getSiderInfo()
  // },
}
</script>

<style lang="less" scoped>
p {
  margin-bottom: 0;
}

.tagHover:hover {
  cursor: pointer;
}

.ant-tag:hover {
  cursor: pointer;
}

.service:hover {
  cursor: pointer;
}

.basic_left {
  background-color: #f9f9f9;
  padding: 0 1rem;
}

.index_info {
  background-color: #f9f9f9;
  padding: 1rem;
}

.index_info2 {
  font-size: 19px;
  color: #2a2a2a;
}

.index_complicate {
  margin-left: 10px;
  font-size: 16px;
  color: gray;
}

.basic_left img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 30px 50px 10px;
}

.ant-tag-red {
  background: none;
}

.drawer-tags {
  position: fixed;
  top: 15%;
  min-height: 600px;
  overflow-y: scroll;
}

.drawer-p {
  display: flex;
  align-items: center;
  color: rgb(0, 0, 0, 0.85);
  margin-bottom: 10px;
}

.drawer-span {
  display: inline-block;
  height: 14px;
  width: 3px;
  border-radius: 10px;
  background: red;
  margin-right: 5px;
}

.drawer-tags .ant-tag {
  border: 1px solid rgba(0, 0, 0, 0.65);
  margin-bottom: 8px;
}

.drawer-tags .ant-tag-checkable-checked {
  border: 1px solid #f5222d;
}

.drawer-button {
  display: inline-block;
  width: 380px;
  text-align: center;
  position: fixed;
  bottom: 10%;
}

.drawer-button .ant-btn:first-of-type {
  margin-right: 20px;
}

.limit-text .sider_text:first-of-type {
  margin-bottom: 8px;
}

.ant-tag {
  margin-bottom: 3px;
}

.text_color {
  color: #bbbbbb;
  margin-right: 20px;
}

.sider_text {
  font-size: 12px;
  color: #000000;
  margin-bottom: 5px;
}

.sider_text_empty {
  font-size: 12px;
  color: red;
}

.sugarlimit:hover {
  cursor: pointer;
}

.basic_right {
  background: #f9f9f9;
  padding: 0 1rem 0 0;
}

.ant-radio-button-wrapper {
  border-radius: 30px;
  border: none;
  background: none;
  margin-right: 30px;
}

.periodTabs {
  margin: 20px 0 60px 0;
  text-align: right;
}

.periodTabs .ant-radio-button-wrapper {
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  font-size: 12px;
  height: 25px;
  line-height: 23px;
}

.ant-radio-button-wrapper:last-of-type {
  margin-right: 0px;
}

.ant-radio-button-wrapper-checked,
.periodTabs .ant-radio-button-wrapper-checked {
  color: white;
  background: #f5222d;
  border: 1px solid #f5222d;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
  box-shadow: 0 0 0 0px rgb(245 34 45 / 8%);
}

.ant-radio-button-wrapper:not(:first-child)::before {
  background: none;
}

.checkInToday .ant-row {
  background: rgb(238, 240, 246);
  text-align: center;
  margin: 20px 0 0 0;
  border-radius: 16px;
  padding: 15px 0;
}

.checkInColTitle {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 15px;
}

.checkInToday img.icon {
  width: 12px;
  margin-left: 2px;
}

.checkImg img {
  width: 64px;
}

/deep/ .ant-table-row > .ant-table-row-cell-break-word:first-of-type {
  background: #fafafa;
}

/deep/ .ant-modal-content {
  background: none;
  box-shadow: none;
}

/deep/ .ant-carousel .slick-slide {
  background: none;
}

/deep/ .ant-carousel .slick-list img {
  width: 500px;
  height: 500px;
  object-fit: contain;
}

/deep/ .slick-slide {
  text-align: center;
  /*background: rgba(31, 45, 61, 0.11);*/
  overflow: hidden;
}

/deep/ .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}

/deep/ .custom-slick-arrow:before {
  display: none;
}

/deep/ .custom-slick-arrow:hover {
  opacity: 0.5;
}

/deep/ .ant-slider-track {
  background: #f5222d;
}

/deep/ .ant-slider-handle {
  border: 2px solid #f5222d;
}
</style>

